<template>
    <el-row class="home" :gutter="20">

        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover">  
                <div class="user">
                    <img :src="userImg" />
                    <div class="userinfo">
                        <p class="name">{{username}}</p>
                        <p class="access">管理员</p>
                    </div>
                </div>
                <div class="host-info">
                    <span class="middleTip">主机信息</span> 
                    <br><br>
                    <p v-for="(val,key) in userInfor" :key="key"> {{key+':'}}<span>{{val}}</span> <br><br></p>
                </div>
            </el-card>
        </el-col>

        <!-- 图表 -->
        <el-col :span="8">
            <el-card shadow="hover" style="margin-top: 20px; height= 300px">
                <span class="middleTip">所有告警</span> 
                <br><br>
                <div style="height: 240px" ref="alarmEcharts"></div>
            </el-card>
        </el-col>

        <!-- 开关 -->
        <el-col :span="8">
            <el-card shadow="hover" style="margin-top: 20px; height= 300px">
                <span class="middleTip">启用检测系统</span> 
                <div  class="startButton" >
                    <img :src="button[index]" />
                </div>
                <div >
                    <el-button type="info" plain v-on:click="onOff">on-off</el-button>
                </div>
                <div class="on-off-info">
                    <p v-for="(val,key) in onOffInfor" :key="key"> {{key+':'}}<span>{{val}}</span> <br></p>
                </div>
            </el-card>
        </el-col>

        <!-- 最近告警信息  -->
        <el-col :span="16">
            <el-card style="margin-top: 20px; height: 460px" shadow = "hover">
                <span class="middleTip">最近告警信息</span> 
                <span class="smallTip" @click="viewDetails">详情</span> 
                <br><br>
                <!-- 告警信息表格 -->
                <el-table :data="tableData">
                    <!-- 循环必须有key prop是根据tableData的key去填数据的 lable是列名 -->
                    <el-table-column v-for="(val,key) in tableLable" :key="key" :prop="key" :label="val"></el-table-column>
                </el-table>
            </el-card>
        </el-col>


    </el-row>



</template>

<script>

// import {getData} from '../../api/data.js'

import * as echarts from 'echarts'
import Cookies from "js-cookie";



export default {
    name: 'home',
    data () {
        return {
            // 用户头像
            userImg: require('../../src/assets/images/user.png'),
            // button: require('../../src/assets/images/starting.png'),
            button: [
                require('../../src/assets/images/standby.png'),
                require('../../src/assets/images/starting.png')
            ],
            index: 0,
            username: 'root',

            // 默认告警信息
            tableData: [
                {
                    time: '-',
                    priority: '-',
                    rule: '-'
                }
            ],
            tableLable:{
                time: '时间',
                priority : '优先级',
                rule: '规则'
            },

            // 用户信息
            userInfor: {
                '主机名称': "-",
                '主机ID码': "-",
                '操作系统': "-",
                '公网IPv4': "-",
                '公网IPv6': "-",
                '私网IPv4': "-",
                '私网IPv6': "-",
                '地域信息': "-",
                '内核版本': "-",
            },

            // 启用信息
            onOffInfor: {
                '上次结束时间': "2022-3-18 12:00:35",
                '启动持续时间': "-"
            }
        }
    },

    methods: {
        onOff(){
            this.index = 1 - this.index;
            console.log(this.$store.state.tab.menu)
        },
        viewDetails(){
            this.$router.push('/log')

        },
        getUserInfo(){
            this.$http.post("http://43.138.136.88:3007/my/getUsername",null,
                {headers: {'Authorization' : Cookies.get('token')}}            
            )
            .then( res =>{
                console.log(res)
                
                if(res.data.status == 0){
                    this.username = res.data.message
                }
            })
        },
        // 获取告警信息
        getAlarmData(){
            this.$http.post("http://43.138.136.88:3007/my/getPriority",null,
                {headers: {'Authorization' : Cookies.get('token')}}            
            )
            .then( res =>{
                console.log(res)
                
                if(res.data.status == 0){
                    const alarmCount = res.data.message
                    
                    // 告警数信息饼图
                    const alarmData = [
                    {
                        name: 'emergency',
                        value: alarmCount['emergency']
                    },
                    {
                        name: 'alert',
                        value: alarmCount['alert']
                    },
                    {
                        name: 'critical',
                        value: alarmCount['critical']
                    },
                    {
                        name: 'error',
                        value: alarmCount['error']
                    },
                    {
                        name: 'warning',
                        value: alarmCount['warning']
                    },
                    {
                        name: 'notice',
                        value: alarmCount['notice']
                    },
                    {
                        name: 'informational',
                        value: alarmCount['informational']
                    },
                    {
                        name: 'debug',
                        value: alarmCount['debug']
                    },
                    
                    ]

                    // 告警信息饼图配置文件
                    const alarmOption = {
                    tooltip: {
                        trigger: "item",
                        formatter: '{b}: {c}个 占比{d}%'
                    },
                    color: [
                        "#dd536b",
                        "#9462e5",
                        "#0f78f4",
                        "#e1bb22",
                        "#2ec7c9",
                        "#ffb980",
                        "#5ab1ef",
                        "#17b3a3"
                    ],
                    series: [
                        {  
                            // 只显示大于0的数据
                            data: alarmData.filter((item) => item.value >0),
                            type: 'pie',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter:  '{b}: {c}个'
                                    },
                                    labelLine: { show: true }
                                }
                            }
                        }
                    ]
                    }
                    // 绘图
                    const alarmPie = echarts.init(this.$refs.alarmEcharts)
                    alarmPie.setOption(alarmOption)
                }
            })
        },

        getData(){
            this.$http.post('http://43.138.136.88:3007/my/getLog',
                'page=1',
                {headers:{
                    'Content-Type' : 'application/x-www-form-urlencoded',
                    'Authorization' : Cookies.get('token')
                }}
            ) 
            .then( res => {
                console.log("res.data")
                console.log(res.data)
                let tableData = []
                let outputData = res.data.message

                for(let i=0;i<=outputData.length-1;++i){
                    let data = {}
                    data["time"] = outputData[i]["time"].substring(0,10) + ' ' + outputData[i]["time"].substring(11,19)
                    data["priority"] = outputData[i]["priority"]
                    data["rule"] = outputData[i]["rule"]
                    tableData.unshift(data)
                }

                this.tableData = tableData
                
                this.onOffInfor = {
                    '上次结束时间': "2022-3-18 12:00:35",
                    '启动持续时间': "0小时0分钟"
                }

                this.userInfor = {
                    '主机名称': outputData[0]["hostname"],
                    '主机ID码': "i-123456",
                    '操作系统': "linux",
                    '公网IPv4': "-",
                    '公网IPv6': "-",
                    '私网IPv4': "10.2.0.36",
                    '私网IPv6': "-",
                    '地域信息': "default",
                    '内核版本': "3.10.0",
                }

            }) 
        }

    },
    // 渲染完界面后自动调用的函数
    created(){
        // 接收数据
        this.getUserInfo()
        this.getAlarmData()
        this.getData()
    }
}

</script>
